<template>
    <div class="user-management">
        <!-- 搜索栏 -->
        <div class="search-bar">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="searchForm.role" placeholder="请选择角色">
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="普通用户" value="user"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 用户列表 -->
        <el-table :data="userList" border style="width: 100%">
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="warning" size="small" @click="handleResetPassword(scope.row)">重置密码</el-button>
                    <el-button type="info" size="small" @click="handleChangeRole(scope.row)">修改权限</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
        </div>

        <!-- 编辑用户对话框 -->
        <el-dialog title="编辑用户" v-model="editDialogVisible" width="500px">
            <el-form :model="editForm" label-width="100px">
                <el-form-item label="用户名">
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 修改权限对话框 -->
        <el-dialog title="修改权限" v-model="roleDialogVisible" width="500px">
            <el-form :model="roleForm" label-width="100px">
                <el-form-item label="角色">
                    <el-select v-model="roleForm.role">
                        <el-option label="管理员" value="admin"></el-option>
                        <el-option label="普通用户" value="user"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="roleDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitRoleChange">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { onMounted } from 'vue';
import { getUserList } from '../../../api/adminApi/userApi';
export default {
    name: 'UserManagement',
    data() {
        return {
            // 搜索表单
            searchForm: {
                username: '',
                role: ''
            },
            // 用户列表
            userList: [],
            // 分页信息
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            // 编辑对话框
            editDialogVisible: false,
            editForm: {
                username: '',
                email: ''
            },
            // 角色对话框
            roleDialogVisible: false,
            roleForm: {
                username: '',
                role: ''
            }
        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        // 获取用户列表
        async getUserList() {
            try {
                const params = {
                    page: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    ...this.searchForm
                }
                const res = await getUserList(params)
                this.userList = res.data.list
                this.pagination.total = res.data.total
            } catch (error) {
                this.$message.error('获取用户列表失败')
            }
        },
        // 搜索
        handleSearch() {
            this.pagination.currentPage = 1
            this.getUserList()
        },
        // 重置搜索
        resetSearch() {
            this.searchForm = {
                username: '',
                role: ''
            }
            this.handleSearch()
        },
        // 分页大小改变
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.getUserList()
        },
        // 当前页改变
        handleCurrentChange(val) {
            this.pagination.currentPage = val
            this.getUserList()
        },
        // 编辑用户
        handleEdit(row) {
            this.editForm = { ...row }
            this.editDialogVisible = true
        },
        // 提交编辑
        async submitEdit() {
            try {
                await this.$http.put(`/api/users/${this.editForm.username}`, this.editForm)
                this.$message.success('修改成功')
                this.editDialogVisible = false
                this.getUserList()
            } catch (error) {
                this.$message.error('修改失败')
            }
        },
        // 重置密码
        async handleResetPassword(row) {
            try {
                await this.$confirm('确定要重置该用户的密码吗？', '提示', {
                    type: 'warning'
                })
                await this.$http.post(`/api/users/${row.username}/reset-password`)
                this.$message.success('密码重置成功')
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('密码重置失败')
                }
            }
        },
        // 修改权限
        handleChangeRole(row) {
            this.roleForm = {
                username: row.username,
                role: row.role
            }
            this.roleDialogVisible = true
        },
        // 提交权限修改
        async submitRoleChange() {
            try {
                await this.$http.put(`/api/users/${this.roleForm.username}/role`, {
                    role: this.roleForm.role
                })
                this.$message.success('权限修改成功')
                this.roleDialogVisible = false
                this.getUserList()
            } catch (error) {
                this.$message.error('权限修改失败')
            }
        }
    }
}

onMounted(() => {
    getUserList()
})
</script>

<style scoped>
.user-management {
    padding: 20px;
}

.search-bar {
    margin-bottom: 20px;
}

.pagination {
    margin-top: 20px;
    text-align: right;
}
</style>
